<!DOCTYPE html>
<html>
<head>
	<title>move distance</title>
	<meta charset="utf-8" />
	<style type="text/css">

		.random-move{
			animation: randomMove 2s;
			animation-iteration-count: 1;
			/*animation-timing-function: ease-in-out;
			animation-delay:2s;*/
		}
		@keyframes randomMove{
			0% {
                transform: translate(0px, 0px);
            }
            50% {
                transform: translate(20px, 20px);
            }
            100% {
                transform: translate(0px, 0px);
            }
		}
		* {
			margin:0;
			padding:0;
			transition: transform .5 ease;
			-webkit-transition: transform .4 ease;
		}
		.box {
			width:100%;
			height:500px;
			text-align:center;
			line-height:100px;
			font-size:50px;
			font-weight:bold;
			color:#b22222;
			background:#ccc;
		}
		.big-img{
			width: 100px;
			height: 100px;
			position: relative;
			top: 200px;
			left: 200px;
			background: #ffe;
		}
		.mouse{
			width: 300px;
			height: 100px;
			display: block;
			background: #fec;
			position: absolute;
			z-index: 15;
			top: 500px;
			/*left: 500px;*/
			left: 50%;
			/*margin-left: -150px;  js control left can't margin*/
			transition: transform 1.5 ease;
			-webkit-transition: transform 1.4 ease;

		}
		.right-up{
			animation: rightUp 2s;
			animation-iteration-count:2;
		}
		@keyframes rightUp{
			0% {
                transform: translate(0px, 0px);
            }
            50% {
                transform: translate(10px, 10px);
            }
            100% {
                transform: translate(0px, 0px);
            }
		}

		.left-up{
			animation: leftUp 2s infinite;
		}
		@keyframes leftUp{
			0% {
                transform: translate(0px, 0px);
            }
            50% {
                transform: translate(-10px, 10px);
            }
            100% {
                transform: translate(0px, 0px);
            }
		}

		.right-down{
			animation: rightDown 2s infinite;
		}
		@keyframes rightDown{
			0% {
                transform: translate(0px, 0px);
            }
            50% {
                transform: translate(10px, -10px);
            }
            100% {
                transform: translate(0px, 0px);
            }
		}

		.left-down{
			animation: leftDown 2s infinite;
		}
		@keyframes leftDown{
			0% {
                transform: translate(0px, 0px);
            }
            50% {
                transform: translate(-10px, -10px);
            }
            100% {
                transform: translate(0px, 0px);
            }
		}

	</style>
	<script type="text/javascript" src="./jquery-3.1.1.min.js"></script>

</head>
<body>
<div class="box">
	<div class="big-img"></div>
    <span class="box-top"></span>
    <span class="box-bot"></span>
    <br>
    <span class="mouse"></span>
</div>

<script type="text/javascript">
	$(function () {

		// var tt=document.styleSheets[0];
		// console.log(tt);
		// tt.deleteRule(0);//清除之前写入的动画样式
		// tt.insertRule("@keyframes mymove{0%{} 100%{transform:rotateZ(0deg);top:10%;left:30%;width:400px}}", 6);

		var styles = document.styleSheets[0]
		// console.log(styles)
		styles.deleteRule(1)

		var r_x = Math.floor((Math.random()) * 30) - 15 + 'px'
		var r_t = Math.floor((Math.random()) * 30) - 15 + 'px'
		// console.log(r_x)
		// styles.insertRule("@keyframes randomMove{0% {transform: translate(0px, 0px);} 50% {transform: translate(" + r_x + "," r_t + ");} 100% {transform: translate(0px, 0px);}}")
		styles.insertRule(`@keyframes randomMove{0% {transform: translate(0px, 0px);} 50% {transform: translate(${r_x},${r_t});} 100% {transform: translate(0px, 0px);}}`)
		

		var oXArr = [];
	    var oYArr = [];
	    var rightArr = [];
	    var leftArr = [];
	    var topArr = [];
	    var downArr = [];
	    // var rightMoveL;
	    // var leftMoveL;
	    // var downMoveL;
	    // var upMoveL;
	    var movel = {
	    	rightMoveL: '',
	    	leftMoveL: '',
	    	downMoveL: '',
	    	upMoveL: '',
	    }

	    var mouse = $('.mouse');
	    var init_xy 
	    init_xy = mouse.offset()
			console.log(init_xy)
	    var xy_i = setInterval(function () {
			init_xy = mouse.offset()
			// console.log(init_xy)
		}, 100)

	  //   var styles = document.styleSheets[0]
			// console.log(styles.cssRules[1])
			// styles.deleteRule(1)

			// var r_x = Math.floor((Math.random()) * 30) - 15 + 'px'
			// var r_t = Math.floor((Math.random()) * 30) - 15 + 'px'
			// styles.insertRule(`@keyframes randomMove{0% {transform: translate(0px, 0px);} 50% {transform: translate(${r_x},${r_t});} 100% {transform: translate(0px, 0px);}}`)
	    $("body").mousemove(function(e) {

	    	// mouse.addClass('random-move')
	    	// setTimeout(function() {
	    	// 	mouse.removeClass('random-move')
	    	// }, 4000)

	        var obxX = e.pageX;
	        var obxY = e.pageY;
	        oXArr.unshift(obxX);
	        oYArr.unshift(obxY);
	        oXArr.splice(2, 1);
	        oYArr.splice(2, 1);

	        // tfo();
	        function tfo() {

	            if (oXArr[0] > oXArr[1]) {
	                // console.log("向右");
	                leftArr = [];
	                rightArr.push(obxX);
	                movel.rightMoveL = Math.abs(rightArr[rightArr.length - 1] - rightArr[0]);
	                // console.log(movel.rightMoveL)

	                // mouse.css('left', init_xy.left + movel.rightMoveL / 50 + 'px')

	                return true;
	            } else {
	                // console.log("向左");
	                rightArr = [];
	                leftArr.push(obxX);
	                movel.leftMoveL = Math.abs(leftArr[leftArr.length - 1] - leftArr[0]);
	                // console.log(movel.leftMoveL)

	                // mouse.css('left', init_xy.left - movel.leftMoveL / 100 + 'px')

	                // console.log(movel)
	                return false;
	            }

	        }
	        // tfw();
	        function tfw() {
	            if (oYArr[0] > oYArr[1]) {
	                // console.log("向下");
	                topArr = [];
	                downArr.push(obxY);
	                movel.downMoveL = Math.abs(downArr[downArr.length - 1] - downArr[0]);

	                // mouse.css('top', init_xy.top + movel.downMoveL / 50 + 'px')

	                return true;
	            } else {
	                // console.log("向上");
	                downArr = [];
	                topArr.push(obxY);
	                movel.upMoveL = Math.abs(topArr[topArr.length - 1] - topArr[0]);

	                // mouse.css('top', init_xy.top - movel.upMoveL / 50 + 'px')

	                return false;
	            }
	        }

	        // mouse.css(
	        // 	{'top': init_xy.top - movel.upMoveL / 100 + 'px'},
	        // 	{'top': init_xy.top + movel.downMoveL / 100 + 'px'},
	        // 	{'left': init_xy.left - movel.leftMoveL / 100 + 'px'},
	        // 	{'left': init_xy.left - movel.rightMoveL / 100 + 'px'},
	        // )


	        if (tfo() && tfw()) {
	            //右下
	            // console.log("右下");
	            mouse.html("鼠标向右下");

	            mouse.addClass('right-down')
	            setTimeout(function () {
	            	mouse.removeClass('right-down')
	            }, 1000)

	            return false

	        } else if (tfo() && !tfw()) {
	            //右上
	            mouse.html("鼠标向右上");

	            mouse.addClass('right-up')
	            setTimeout(function () {
	            	mouse.removeClass('right-up')
	            }, 1000)

	            return false
	        } else if (!tfo() && tfw()) {
	            //左下
	            mouse.html("鼠标向左下");
	            mouse.addClass('left-down')
	            setTimeout(function () {
	            	mouse.removeClass('left-down')
	            }, 1000)

	            return false

	        } else if (!tfo() && !tfw()) {
	            //左上
	            mouse.html("鼠标向左上");
	            mouse.addClass('left-up')
	            setTimeout(function () {
	            	mouse.removeClass('left-up')
	            }, 1000)

	            return false
	        }
	    });
	})
</script>

<script type="text/javascript">
	(function(){
        var bannerWrap = document.querySelector('.box'),
            banner = bannerWrap.querySelector('.big-img');
        banner.addEventListener('mousemove', function(e){
            this.style.transition = '';
            var centerX = banner.offsetLeft + banner.offsetWidth / 2,  //div中心点到页面左边距离
                centerY = banner.offsetTop + banner.offsetHeight / 2;
 
            var deltaX = e.pageX - centerX,
                deltaY = e.pageY - centerY;
 
 
            var percentageX = deltaX / centerX,  //向左或向右的 偏差率
                percentageY = deltaY / centerY;
            var deg = 20;  //控制 偏差的 程度
            this.style.transform = 'rotateX(' + percentageY * deg + 'deg)'
                + 'rotateY(' + percentageX * deg + 'deg) translateZ(30px)';
        });
        banner.addEventListener('mouseleave', function(e){
            this.style.transform = 'rotateX(0) rotateY(0) translateZ(0px)';
            this.style.transition = 'all 0.2s linear';
        })
    })()
</script>

</body>
</html>